function convertToGS(img){
    //存储原始图片
    img.color = img.src;
    // console.log('1:',img.color,'2:',img.src)
    //创建灰度版
    img.grayscale = createGSCanvas(img);
    //在onmouseover/out事件发生时切换图片
    img.onmouseover = function(){
        this.src = this.color;
    }
    img.onmouseout = function(){
        this.src = this.grayscale;
    }
    img.onmouseout()
}
function createGSCanvas(img){
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    let ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0);
    //getImageData只能操作与脚本位于同一个域中的图片
    let c = ctx.getImageData(0,0,img.width,img.height);
    //取得原始图像数据，循环遍历其中的每一个像素，将每个彩色像素的红绿蓝成分求平均值，得到对应彩色值的灰度值
    for(let i=0;i<c.height;i++){
        for(let k=0;k<c.width;k++){
            let x = (i*4)*c.width + (k*4);
            let r = c.data[x];
            let g = c.data[x+1];
            let b = c.data[x+2];
            c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
        }
    }
    ctx.putImageData(c,0,0,0,0,c.width,c.height);
    return canvas.toDataURL();
}
window.onload = function(){
    this.convertToGS(document.getElementById("Plane"));  //文档中img
}